<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.drag{
				position: absolute;
				left: 0;
				width: 100px;
				height: 100px;
			}
			.drag1{
				background: red;
			}
			.drag2{
				left: 100px;
				background: blue;
			}
		</style>
	</head>
	<body>
		<div class="drag drag1"></div>
		<div class="drag drag2"></div>
		
		<script type="text/javascript">
			function Drag(el){
				this.el = document.querySelector(el)
				this.current = {
					x:0,
					y:0
				}
				this.el.addEventListener('mousedown',(e)=>{
					e.preventDefault()
					this.current.x = e.clientX-this.el.offsetLeft
					this.current.y = e.clientY-this.el.offsetTop
					
					document.onmousemove = this.dragMove.bind(this)
					document.onmouseup = function(){
						document.onmousemove = null;
						document.onmouseup = null;
					}
				})
			}
			Drag.prototype.dragMove = function(e){
				var offsetX = e.clientX - this.current.x
				var offsetY = e.clientY - this.current.y
				this.setStyle(offsetX,offsetY)
			}
			Drag.prototype.setStyle = function(x,y){
				this.el.style.left = x+'px'
				this.el.style.top = y+'px'
			}
			var drag1 = new Drag('.drag1')
		</script>
	</body>
</html>
